import React, { useMemo, memo } from 'react';
import { createStyles } from "antd-style";
import { createSchemaField, ISchema } from '@formily/react'
import { Form, FormProps } from '@formily/antd-v5'
import { JSXComponent } from "@formily/react/esm/types";
import { getInnerComponents } from './common';

export interface ProJsonSchemaFormProps extends Partial<FormProps> {
  schema?: ISchema;
  components?: {
    [key: string]: JSXComponent;
  },
  initialValues?: any;
}

const ProJsonSchemaForm: React.FC<ProJsonSchemaFormProps> = ({ schema = {}, components = {}, initialValues = {}, ...restProps }) => {
  const { styles } = useStyle();
  const SchemaField = useMemo(() => createSchemaField({
    components: getInnerComponents(),
  }), []);

  return (
    <div className={styles.proJsonSchemaForm}>
      <Form {...restProps}>
        <SchemaField
          components={components}
          initialValue={initialValues}
          schema={schema}
        />
      </Form>
    </div>
  );
}

export default memo(ProJsonSchemaForm);


const useStyle = createStyles(({ css }) => ({
  proJsonSchemaForm: css`
    width: 100%;

    & > div {
      width: 100%;
    }

    .ant-form-item {
      margin-bottom: 11px;
    }
  `
}))
